.stk-table {
    --row-height: 28px;
    --cell-padding-x: 8px;
    --resize-handle-width: 4px;
    --border-color: #e8eaec;
    --border-width: 1px;
    --td-bgc: #fff;
    --th-bgc: #f8f8f9;
    --tr-active-bgc: rgb(230, 247, 255);
    --tr-hover-bgc: rgba(230, 247, 255, 0.7);
    --bg-border-top: linear-gradient(180deg, var(--border-color) var(--border-width), transparent var(--border-width));
    --bg-border-right: linear-gradient(270deg, var(--border-color) var(--border-width), transparent var(--border-width));
    --bg-border-bottom: linear-gradient(0deg, var(--border-color) var(--border-width), transparent var(--border-width));
    --bg-border-left: linear-gradient(90deg, var(--border-color) var(--border-width), transparent var(--border-width));
    --highlight-color: #71a2fd;

    --sort-arrow-color: #5d5f69;
    --sort-arrow-hover-color: #8f90b5;
    --sort-arrow-active-color: #1b63d9;
    --sort-arrow-active-sub-color: #cbcbe1;
    /** 列宽拖动指示器颜色 */
    --col-resize-indicator-color: #cbcbe1;

    position: relative;
    overflow: auto;
    display: flex;
    flex-direction: column;

    /**深色模式 */
    &.dark {
      --th-bgc: #181c21;
      --td-bgc: #181c21;
      --border-color: #26292e;
      --tr-active-bgc: #283f63;
      --tr-hover-bgc: #1a2b46;
      --table-bgc: #181c21;
      --highlight-color: #1e4c99;

      --sort-arrow-color: #5d6064;
      --sort-arrow-hover-color: #727782;
      --sort-arrow-active-color: #d0d1d2;
      --sort-arrow-active-sub-color: #5d6064;

      --col-resize-indicator-color: #5d6064;

      // background-color: var(--table-bgc); // ⭐这里加background-color会导致表格出滚动白屏
      color: #d0d1d2;
    }

    // .stk-table-fixed-left-col-box-shadow {
    //   position: sticky;
    //   left: 0;
    //   top: 0;
    //   height: 100%;
    //   box-shadow: 0 0 10px;
    //   z-index: 1;
    //   pointer-events: none;
    // }
    &.headless {
      border-top: 1px solid var(--border-color);
    }

    /** 调整列宽的时候不要触发th事件。否则会导致触发表头点击排序 */
    &.is-col-resizing th {
      pointer-events: none;
    }

    /** 列宽调整指示器 */
    .column-resize-indicator {
      width: 0;
      height: 100%;
      border-left: 1px dashed var(--col-resize-indicator-color);
      position: absolute;
      z-index: 10;
      display: none;
      pointer-events: none;
    }

    .stk-table-main {
      border-spacing: 0;
      border-collapse: separate;

      th,
      td {
        z-index: 1;
        height: var(--row-height);
        font-size: 14px;
        box-sizing: border-box;
        padding: 0 var(--cell-padding-x);
        background-image: var(--bg-border-right), var(--bg-border-bottom);
      }

      thead {
        tr {
          &:first-child th {
            position: sticky;
            top: 0;
            // border-top: 1px solid var(--border-color);
            background-image: var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);

            &:first-child {
              background-image: var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom), var(--bg-border-left);
            }
          }

          th {
            background-color: var(--th-bgc);

            &.sortable {
              cursor: pointer;
            }

            &:first-child {
              // border-left: 1px solid var(--border-color);
              background-image: var(--bg-border-right), var(--bg-border-bottom), var(--bg-border-left);
              // padding-left: 12px;
            }

            // &:last-child {
            //   padding-right: 12px;
            // }
            &.text-overflow {
              .table-header-cell-wrapper {
                white-space: nowrap;
                overflow: hidden;

                .table-header-title {
                  text-overflow: ellipsis;
                  overflow: hidden;
                }
              }
            }

            &:not(.sorter-desc):not(.sorter-asc):hover .table-header-cell-wrapper .table-header-sorter {
              #arrow-up {
                fill: var(--sort-arrow-hover-color);
              }

              #arrow-down {
                fill: var(--sort-arrow-hover-color);
              }
            }

            &.sorter-desc .table-header-cell-wrapper .table-header-sorter {
              // display:initial;
              #arrow-up {
                fill: var(--sort-arrow-active-sub-color);
              }

              #arrow-down {
                fill: var(--sort-arrow-active-color);
              }
            }

            &.sorter-asc .table-header-cell-wrapper .table-header-sorter {
              // display:initial;
              #arrow-up {
                fill: var(--sort-arrow-active-color);
              }

              #arrow-down {
                fill: var(--sort-arrow-active-sub-color);
              }
            }

            .table-header-cell-wrapper {
              max-width: 100%; //最大宽度不超过列宽
              display: inline-flex;
              align-items: center;

              .table-header-title {
                overflow: hidden;
                align-self: flex-start;
              }

              .table-header-sorter {
                flex-shrink: 0;
                margin-left: 4px;
                width: 16px;
                height: 16px;
                // display:none;
                #arrow-up,
                #arrow-down {
                  fill: var(--sort-arrow-color);
                }
              }
              .table-header-resizer {
                position: absolute;
                top: 0;
                cursor: col-resize;
                width: var(--resize-handle-width);
                height: var(--row-height);
                &.left {
                  left: 0;
                }
                &.right {
                  right: 0;
                }
              }
            }
          }
        }
      }

      tbody {
        /**高亮渐暗 */
        @keyframes dim {
          from {
            background-color: var(--highlight-color);
          }
        }

        tr {
          background-color: var(--td-bgc); // td inherit tr bgc

          &.highlight-row {
            animation: dim 2s linear;
          }

          // &.highlight-row-transition {
          //   transition: background-color 0.2s linear;
          // }

          &.hover,
          &:hover {
            background-color: var(--tr-hover-bgc);
          }

          &.active {
            background-color: var(--tr-active-bgc);
          }

          td {
            &.fixed-cell {
              background-color: inherit; // 防止横向滚动后透明
            }

            &:first-child {
              background-image: var(--bg-border-right), var(--bg-border-bottom), var(--bg-border-left);
            }

            &.highlight-cell {
              animation: dim 2s linear;
            }

            &.text-overflow {
              .table-cell-wrapper {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }
            }

            //   &.perch-td {
            //     padding: 0;
            //     height: 0;
            //     &.top {
            //       background-image: repeating-linear-gradient(
            //           180deg,
            //           transparent 0,
            //           transparent var(--row-height),
            //           var(--border-color) var(--row-height),
            //           var(--border-color) calc(var(--row-height) + 1px)
            //         ),
            //         var(--bg-border-right);
            //     }
            //     &.bottom {
            //       background-image: repeating-linear-gradient(
            //           0deg,
            //           transparent 0,
            //           transparent var(--row-height),
            //           var(--border-color) var(--row-height),
            //           var(--border-color) calc(var(--row-height) + 1px)
            //         ),
            //         var(--bg-border-right);
            //     }
            //   }
          }
        }

        // 斑马纹
        // tr:nth-child(2n) td {
        //   background-color: #fafafc;
        // }
        // tr:hover {
        //   background-color: #ebf3ff;
        // }
      }
    }

    .stk-table-no-data {
      background-color: var(--table-bgc);
      line-height: var(--row-height);
      text-align: center;
      font-size: 14px;
      position: sticky;
      left: 0px;
      border-left: var(--border-width) solid var(--border-color);
      border-right: var(--border-width) solid var(--border-color);
      border-bottom: var(--border-width) solid var(--border-color);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      &.no-data-full {
        flex: 1;
      }
    }

    /**虚拟滚动模式 */
    &.virtual {
      .stk-table-main {
        thead {
          tr {
            th {
              // 为不影响布局，表头行高要定死
              .table-header-cell-wrapper {
                overflow: hidden;
                max-height: var(--row-height);
              }
            }
          }
        }

        tbody {
          position: relative;

          tr {
            td {
              height: var(--row-height);
              line-height: 1;

              .table-cell-wrapper {
                max-height: var(--row-height);
                overflow: hidden;
              }
            }
          }
        }
      }
    }

    &.virtual-x {
      .stk-table-main {
        .virtual-x-left {
          padding: 0;
        }

        thead tr:first-child .virtual-x-left + th {
          // 横向虚拟滚动时，左侧第一个单元格加上border-left
          background-image: var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom), var(--bg-border-left);
        }

        tr .virtual-x-left + th {
          background-image: var(--bg-border-right), var(--bg-border-bottom), var(--bg-border-left);
        }
      }
    }
  }